<template>
	<div>
		<div class="crumbs">
			<!-- <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-home"></i> 用户列表</el-breadcrumb-item>
                <el-breadcrumb-item>用户详情</el-breadcrumb-item>
            </el-breadcrumb> -->
			<div
				:style="{
					'text-align': 'left',
					display: 'grid',
					'grid-auto-flow': 'column',
					'justify-content': 'left',
					'margin-bottom': '10px'
				}"
			>
				<el-input
					clearable
					@clear="handleSearch"
					@keyup.enter.native="handleSearch"
					v-model="query.uid"
					placeholder="用户ID"
					class="handle-input mr10"
				></el-input>
				<el-input
					clearable
					@clear="handleSearch"
					@keyup.enter.native="handleSearch"
					v-model="query.phone"
					placeholder="手机号"
					class="handle-input mr10"
				></el-input>
				<el-input
					clearable
					@clear="handleSearch"
					@keyup.enter.native="handleSearch"
					v-model="query.userName"
					placeholder="名称"
					class="handle-input mr10"
				></el-input>
				<el-button type="primary" @click="handleSearch">搜索</el-button>
			</div>
			<p
				:style="{
					color: '#606266',
					'font-size': '14px',
					'font-weight': 'bold'
				}"
			>
				搜索结果:
			</p>
		</div>
		<!-- v-if="Object.keys(userinfo).length > 0" -->
		<div class="container">
			<div class="handle-box">
				<div class="user-table">
					<div class="header">
						<!-- =============================================================== -->
						<div class="top">
							<div class="avatar"><img src="http://static.xingfeng.cool/images/avatar.jpeg" alt="" /></div>
							<div class="introduce">
								<p class="title">蓝色港湾</p>
								<p>
									<span>ID:{{ userinfo.uid }}</span>
									<span>手机号: 15879107577</span>
									<span>已绑定: 微信</span>
									<span>邮箱: {{ userinfo.email }}</span>
								</p>
							</div>
						</div>
						<!-- =============================================================== -->
						<div class="bottom">
							<span>注册时间: {{ userinfo.registrationTime }}</span>
							<span>账号状态: {{ userinfo.state }}</span>
							<span>查看其他详情信息</span>
						</div>
					</div>
					<!-- =============================================================== -->
					<div class="assets">
						<div class="left">资产</div>
						<div class="right">
							<p>
								<span>当前积分</span>
								<span>{{ integral.currentPoints }}</span>
							</p>
							<p>
								<span>积分有效期</span>
								<span>{{ integral.endtime }}</span>
							</p>
						</div>
					</div>
					<!-- =============================================================== -->
					<div class="vip">
						<div class="left">会员</div>
						<div class="right">
							<p>
								<span>会员类型</span>
								<span>{{ memberinfo.memberInfoType }}</span>
							</p>
							<p>
								<span>积分有效期</span>
								<span>{{}}</span>
							</p>
							<p>
								<span>到期时间</span>
								<span>{{ memberinfo.endTime }}</span>
							</p>

							<p>
								<span>会员期限</span>
								<span>{{ memberinfo.memberPeriod }}</span>
							</p>
						</div>
					</div>
					<!-- =============================================================== -->
					<div class="tag">
						<div class="left">标签</div>
						<div class="right">
							<p>付费用户</p>
							<p>
								<span>流行</span>
								<span>电音</span>
								<span>英语</span>
							</p>
						</div>
					</div>
				</div>
			</div>

			<tab-text :tabpaneArr="tabpaneArr" active="first" @getData="getData">
				<!-- 购买记录 -->
				<el-table
					slot="buyRecord"
					:header-cell-style="{ background: '#E8E8E8 !important', color: '#555 !important' }"
					:data="tableData"
					:border="false"
					class="table"
					ref="multipleTable"
					header-cell-class-name="table-header"
					@selection-change="handleSelectionChange"
				>
					<el-table-column label="订单号" align="center" :show-overflow-tooltip="true">
						<template slot-scope="scope">{{ scope.row.tradeNo }}</template>
					</el-table-column>
					<el-table-column label="资源ID" align="center" :show-overflow-tooltip="true">
						<template slot-scope="scope">{{ scope.row.resourcesID }}</template>
					</el-table-column>
					<el-table-column label="类型" align="center">
						<template slot-scope="scope">{{ scope.row.productType }}</template>
					</el-table-column>
					<el-table-column label="订单名称" align="center" :show-overflow-tooltip="true">
						<template slot-scope="scope">{{ scope.row.productName }}</template>
					</el-table-column>
					<el-table-column label="支付金额" align="center">
						<template slot-scope="scope">{{ scope.row.totalAmount }}</template>
					</el-table-column>
					<el-table-column label="支付渠道" align="center">
						<template slot-scope="scope">{{ scope.row.payPlatform }}</template>
					</el-table-column>

					<el-table-column label="支付状态" align="center">
						<template slot-scope="scope">{{ scope.row.payStaus }}</template>
					</el-table-column>

					<el-table-column label="创建时间" align="center" :show-overflow-tooltip="true">
						<template slot-scope="scope">{{ scope.row.createTime }}</template>
					</el-table-column>

					<el-table-column label="渠道" align="center">
						<template slot-scope="scope">{{ scope.row.channel }}</template>
					</el-table-column>
				</el-table>
				<!-- 积分明细 -->
				<el-table
					slot="integralDetail"
					:header-cell-style="{ background: '#E8E8E8 !important', color: '#555 !important' }"
					:data="tableData"
					:border="false"
					class="table"
					ref="multipleTable"
					header-cell-class-name="table-header"
					@selection-change="handleSelectionChange"
				>
					<el-table-column label="时间" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>
					<el-table-column label="渠道" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>
					<el-table-column label="原因" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>
					<el-table-column label="积分记录" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>
				</el-table>
				<!-- 登录记录 -->
				<el-table
					slot="loginRecord"
					:header-cell-style="{ background: '#E8E8E8 !important', color: '#555 !important' }"
					:data="tableData"
					:border="false"
					class="table"
					ref="multipleTable"
					header-cell-class-name="table-header"
					@selection-change="handleSelectionChange"
				>
					<el-table-column label="登录时间" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>
					<el-table-column label="访问IP" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>
					<el-table-column label="渠道" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>
					<el-table-column label="APP版本号" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>
					<el-table-column label="手机系统" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>
					<el-table-column label="所在区域" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>

					<el-table-column label="运营商网络" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>

					<el-table-column label="设备号" align="center">
						<template slot-scope="scope">{{ scope.row.name }}</template>
					</el-table-column>
				</el-table>
			</tab-text>

			<div class="pagination">
				<el-pagination
					background
					layout="total,sizes, prev, pager, next, jumper"
					:page-sizes="[5, 10, 20, 30]"
					@size-change="handleSizeChange"
					:current-page="query.pageIndex + 1"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" :visible.sync="editVisible" width="50%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="用户名">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="form.address"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import { fetchData } from '@/api/index';
	export default {
		name: 'basetable',
		components: {
			'tab-text': () => import('@/components/common/TabText.vue')
		},
		data() {
			return {
				memberinfo: {
					// // 会员信息
					// memberInfoType: '', // 类型
					// startTime: '', // 开通时间
					// endTime: '', // 到期时间
					// memberPeriod: '' // 会员期限
				},
				integral: {
					// // 资产信息
					// currentPoints: '', // 当前积分
					// endtime: '' // 积分有效期
				},
				userinfo: {
					//用户信息
					// uid: '', // 用户ID
					// email: '', // 邮箱
					// registrationTime: '', // 注册时间
					// bindingType: '', // 已绑定
					// state: '' // 账号状态
				},

				tabpaneArr: [
					{
						name: 'first',
						slotName: 'buyRecord',
						label: '购买记录',
						show: true
					},
					{
						name: 'second',
						slotName: 'integralDetail',
						label: '积分明细',
						show: true
					},
					{
						name: 'third',
						slotName: 'loginRecord',
						label: '登录记录',
						show: true
					}
				],
				query: {
					name: '',
					pageIndex: 0,
					pageSize: 10,
					uid: '',
					phone: '',
					userName: ''
				},
				tableData: [],
				multipleSelection: [],
				delList: [],
				editVisible: false,
				pageTotal: 0,
				form: {}
			};
		},
		// activated() {
		//     this.getDataById(this.$route.query.uid);
		//     // 购买记录
		//     this.getData();
		// },
		methods: {
			async getData(url = '/user/purchase/list') {
				console.log(url);
				try {
					const { data: res } = await this.$http[0].get(url, {
						params: this.$removeField({
							// uid: this.$route.query.uid,
							uid: this.query.uid,
							page: this.query.pageIndex,
							size: this.query.pageSize
						})
					});
					console.log(res);
					if (res.data.content && res.data.content.length > 0) {
						res.data.content.map((item) => {
							item.createTime = this.$dateFormat(item.createTime, '', '-');
						});
						this.tableData = res.data.content;
						this.pageTotal = res.data.totalElements || 0;
					} else {
						this.tableData = [];
						this.pageTotal = 0;
					}
				} catch (err) {
					console.dir(err);
					this.tableData = [];
					this.pageTotal = 0;
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},
			// 获取 easy-mock 的模拟数据
			async getDataById(uid) {
				try {
					const url = '/user/userinfo/detail';
					const { data: res } = await this.$http[0].get(url, {
						params: this.$removeField({
							userName: this.query.userName,
							uid: this.query.uid,
							phone: this.query.phone
						})
					});
					console.log(res);
					this.memberinfo = res.data.memberinfo;
					this.integral = res.data.integral;
					this.userinfo = res.data.userinfo;
				} catch (err) {
					this.userinfo = {};
					this.memberinfo = {};
					this.integral = {};
					console.dir(err);
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
				// fetchData(this.query).then(res => {
				//     console.log(res);
				//     this.tableData = res.list;
				//     this.pageTotal = res.pageTotal || 50;
				// });
			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageIndex', 0);
				this.getDataById();
				this.getData();
			},
			// 拉黑操作
			handleBlack(index, row) {
				// 二次确认删除
				this.$confirm('确定要拉黑吗？', '提示', {
					type: 'warning'
				})
					.then(() => {
						// this.$message.success('删除成功');
						// this.tableData.splice(index, 1);
						// this.$router.replace({
						//     path: '/user/black'
						// });
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消拉黑'
						});
					});
			},
			// 多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			delAllSelection() {
				const length = this.multipleSelection.length;
				let str = '';
				this.delList = this.delList.concat(this.multipleSelection);
				for (let i = 0; i < length; i++) {
					str += this.multipleSelection[i].name + ' ';
				}
				this.$message.error(`删除了${str}`);
				this.multipleSelection = [];
			},
			// 查看操作
			// handleSearch(index, row) {
			//     // this.$router.replace({
			//     //     path: '/user/detail'
			//     // });
			// },
			// 保存编辑
			saveEdit() {
				this.editVisible = false;
				this.$message.success(`修改第 ${this.idx + 1} 行成功`);
				this.$set(this.tableData, this.idx, this.form);
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val - 1);
				this.getData();
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			}
		}
	};
</script>

<style scoped lang="scss">
	.handle-box {
		text-align: center;
		margin-bottom: 20px;
		.user-table {
			width: 628px;
			height: 428px;
			display: inline-block;
			.header {
				background-color: rgba(16, 16, 16, 0.76);
				width: 100%;
				height: 128px;
				color: #fff;
				padding: 16px 50px 10px 22px;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.top {
					display: flex;
					justify-content: flex-start;
					.avatar {
						width: 50px;
						height: 50px;
						border-radius: 50%;
						margin-right: 10px;
						img {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.introduce {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						p {
							&.title {
								font-weight: bold;
								font-size: 14px;
							}
							font-size: 10px;
							text-align: left;
							margin: 0;
							padding: 0;
							span {
								margin-right: 10px;
							}
						}
					}
				}
				.bottom {
					text-align: left;
					font-size: 11px;
					span {
						margin-right: 30px;
						&:first-of-type {
							margin-left: 10px;
						}
						&:nth-of-type(3) {
							color: #6f9dbb;
							cursor: pointer;
						}
					}
				}
			}
			.assets,
			.vip {
				width: 100%;
				height: 100px;
				border: 1px solid #e8e8e8;
				box-sizing: border-box;
				border-bottom: none;
				margin-bottom: 1px;
				.left {
					line-height: 100px;
					text-align: center;
					width: 42px;
					background-color: #ccc;
					font-size: 10px;
					color: #fff;
					float: left;
					// border-bottom: 1px solid #000;
					// box-sizing: border-box;
				}
				.right {
					float: right;
					width: calc(100% - 42px);
					height: 100px;
					text-align: left;
					padding: 11px 0 32px 28px;
					box-sizing: border-box;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					p {
						margin: 0;
						padding: 0;
						margin-right: 50px;
						span {
							display: inline-block;
							margin-right: 20px;
							text-align: center;
							height: 28px;
							line-height: 28px;
							font-size: 12px;
							font-weight: bold;
							&:first-of-type {
								color: #101010;
							}
							&:nth-of-type(2) {
								color: #494949;
							}
						}
						display: flex;
						flex-direction: column;
						justify-content: center;
					}
				}
			}

			.tag {
				width: 100%;
				height: 100px;
				border: 1px solid #e8e8e8;

				.left {
					line-height: 100px;
					text-align: center;
					width: 42px;
					background-color: #ccc;
					font-size: 10px;
					color: #fff;
					float: left;
				}
				.right {
					float: right;
					width: calc(100% - 42px);
					height: 100px;
					display: flex;
					align-items: center;
					padding-left: 40px;
					box-sizing: border-box;
					p {
						margin: 0;
						padding: 0;
						&:first-of-type {
							width: 56px;
							height: 56px;
							line-height: 56px;
							color: #fff;
							border-radius: 50%;
							background: rgba(0, 0, 0, 0.4);
							white-space: nowrap;
							font-size: 14px;
							cursor: pointer;
						}
						&:nth-of-type(2) {
							margin-left: 97px;
							height: 100%;
							padding-top: 17px;
							box-sizing: border-box;
							span {
								background-color: rgba(0, 0, 0, 0.6);
								display: inline-block;
								width: 65px;
								height: 23px;
								line-height: 23px;
								border-radius: 11.5px;
								margin-right: 12px;
								font-size: 12px;
								color: #fff;
								cursor: pointer;
							}
						}
					}
				}
			}
		}
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 120px;
		display: inline-block;
	}
	.table {
		width: 100%;
		font-size: 14px;
	}
	.red {
		color: #ff0000;
	}
	.mr10 {
		margin-right: 10px;
	}
	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>
